<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>老侯代读</title>
  <meta name="description" content="" /> 
  <meta name="keywords" content="" />
  <link rel="stylesheet" href="/css/style.css">
  <script src="/js/jquery.min.js"></script>
  <script src="/js/js.js"></script>
  <script src="/js/mask.js"></script>
</head>
<body>
<div class="container">
  <div class="part-title">
    <h3><span>我近期看过的书</span></h3>
    <div class="sel-time">
      <p id="selectTime" class="checked-time">一个月以前 <span></span></p>
      <ul id="checkItem" class="check-time-items act" name="" id="">
        <li value="">一个月以前1</li>
        <li value="">一个月以前2</li>
        <li value="">一个月以前3</li>
        <li value="">一个月以前4</li>
        <li value="">一个月以前5</li>
      </ul>
    </div>
    <script>
      var selTime = document.getElementById("selectTime");
      var checkItem = document.getElementById("checkItem");


      /*  selTime.addEventListener("onclick", function(e){
       var ev = e || event;

       if(e.stopPropagation){
       e.stopPropagation();
       }else{
       e.cancelBubble = true;
       }
       return false;
       },false)*/
      $(function(){

        /*$("#selectTime").on("click", function(e){

         if($(".check-time-items").css("display") == "none"){
         $(".check-time-items").css("display", "block");
         }else if($(".check-time-items").css("display") == "block"){
         $(".check-time-items").css("display", "none");
         $(window).off("click");
         }

         $(window).on("click", function(){
         $(".check-time-items").css("display", "none");
         $(window).off("click");
         })

         $(".check-time-items li").on("click", function(){
         $("#selectTime").text($(this).text());
         $(".check-time-items").css("display", "none");
         $(".check-time-items li").off("click");
         $(window).off("click");

         })
         $(".check-time-items").on("click", function(e){
         stopBubble(e);
         })
         //阻止冒泡
         stopBubble(e)
         })*/
      })

      function stopBubble(e){
        var ev = e || event;
        if(ev.stopPropagation){
          ev.stopPropagation();
        }else{
          ev.cancelBubble = true;
        }
        return false;
      }
    </script>
  </div>
  <div class="up-read-box">
    <ul class="up-read-items">
      @if(count($entBookViewLog)>0)
        @foreach($entBookViewLog as $data)
          <li>
            <a href="/bookdetail/{{$data->BookID}}.html"><img class="book-pho" src="{{$data->FilePath1}}" alt=""></a>
            <div class="book-info">
              <div class="book-name-box">
                <h3 class="book-name"><a href="/bookdetail/{{$data->BookID}}.html">{{$data->BookTitle}}</a></h3>
                <a href="/audiodetail/{{$data->BookID}}.html" class="from-audio"><img src="/images/listen.png" alt=""></a>
              </div>
              <div class="read-statu read-all">
                {{--<p class="read-time H"><span>已读完</span></p>--}}
                <p class="read-time H"><span></span></p>
                <p><span>阅读开始时间：</span><span>{{$data->StartTime}}</span></p>
                {{--<p><span>阅读结束时间：</span><span>2016-08-23 19:00</span></p>--}}
              </div>
            </div>
          </li>
          @endforeach
        @endif


    </ul>
  </div>
  <!--底部-->
  @include('controller.footer')
</div>
<div class="mask" id="mask">
  <div id="askPanel" class="ask-panel">
    <div class="ask-pannel-head">
      <p class="bank-list-tit">阅读时间记录</p>
    </div>
    <div class="ask-pannel-body">
      <ul id="bankList" class="bank-list">
        <li>一个月以前</li>
        <li>两个月以前</li>
        <li>三个月以前</li>
        <li>四个月以前</li>
        <!-- <li>一个月以前</li>
         <li>一个月以前</li>
         <li>一个月以前</li>
         <li>一个月以前</li>-->
      </ul>
    </div>
    <div class="ask-pannel-footer">
      <p id="cancleBank" class="cancle-bank">取消</p>
    </div>
  </div>
</div>
<script>
  $(function(){
    var shMask = new mask($("#selectTime"), $("#mask"), $("#cancleBank"));
  })
</script>
</body>
</html>